<!DOCTYPE html>
<html>
<head>
    <title>Flat Admin V.2 - Free Bootstrap Admin Templates</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <frame-options policy="SAMEORIGIN" />
    <#scripts />
    <style type="text/css">
    	.flat-blue .content{
    		margin: 0;
    		padding: 0;
    	}
    	.flat-blue .content .card-body{
    		padding:15px;
    	}
    	form .el-radio {
		    padding-top: 8px;
		}
    </style>
</head>

<body class="flat-blue">
	<div class="row content" id="main">
       <div class="col-xs-12 content">
       	<div class="card-body">
       	 <el-tree ref="tree"
		  :data="menuTree"
		  show-checkbox
		  node-key="id"
		  :default-expanded-keys="selectMenu"
		  :default-checked-keys="selectMenu"
		  :props="defaultProps"
		  highlight-current>
		</el-tree>
         <button type="button" class="btn btn-info" @click="save">保存</button>
         <button type="button" class="btn btn-default" @click="cancel">取消</button>
       </div></div>
   </div>
   <script type="text/javascript">
   var vm = new Vue({
	    el: '#main',
	    data: {
    		defaultProps: {
  	          children: 'childs',
  	          label: 'name'
  	        },
	    	menuTree:[],
	    	selectMenu:[],
	    	id:"${id}"
	    },
			    // 点击菜单使用的函数
	    methods: {
	    	save:function(){
	    		var checkedKeys = vm.$refs.tree.getCheckedKeys().join(",");
	    		var params = new URLSearchParams();
	        	params.append('menuids', checkedKeys);  
	        	params.append('id', vm.id);  
	    		axios.post('/role/set/'+vm.id,params).then(function (response) {
	            	var data = response.data;
	            	if(data.code==200){
	            		parent.layer.closeAll();
	            	}
	            }).catch(function (error) {
	                console.log(error);
	            });
	    	},
	    	cancel:function(){
	    		parent.layer.closeAll();
	    	},
	        onload:function(){
	        	axios.post('/menu/tree').then(function (response) {
	            	var data = response.data;
	            	console.log(data)
	            	if(data.code==200){
	            		vm.menuTree = data.data;
	            	}
	            }).catch(function (error) {
	                console.log(error);
	            });
	        	axios.get('/role/getSetNode/'+vm.id).then(function (response) {
	            	var data = response.data;
	            	console.log(data)
	            	if(data.code==200){
	            		vm.selectMenu = data.data;
	            	}
	            }).catch(function (error) {
	                console.log(error);
	            });
	        },
	    }
	});
	vm.onload();
   </script>
</body>

</html>
